<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>晚风留言-搜索结果</title>
    <link rel="shortcut icon" href="#">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/indeximg.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>
<body>
    <div id="app">

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <img src="../assets/logo.png" alt="" width="40" height="30" class="d-inline-block align-top">
                    晚风留言
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="../html/index.html" tabindex="-1"
                                aria-disabled="true">首页</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link" href="../html/TimeShow.html">推荐</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../html/AddArticle.html">添加作品</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="../html/myArticle.html">我的作品</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="../html/myArticle.html">搜索结果</a>
                        </li>


                    </ul>
                    <ul class="navbar-nav navbar-right">
                        <img style="border-radius:50%;" :src="selectuserdata.img" data-bs-toggle="modal"
                            data-bs-target="#exampleModal2" alt="" width="50" height="50"
                            class="d-inline-block align-top">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                你好:{{username}}
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">

                                <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#exampleModal"
                                        href="#" @click="selectuserbyname">修改个人信息</a></li>

                                <li><a class="dropdown-item" href="javascript:void(0)" @click="walkout">退出</a></li>

                            </ul>
                        </li>
                    </ul>

                    <div class="d-flex">

                        <input class="form-control me-6" type="search" placeholder="搜索" aria-label="Search"
                            v-model="returnText">
                        <button class="btn btn-outline-success" type="submit" @click="returnaticle">Search</button>

                    </div>

                </div>
            </div>
        </nav>
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">修改个人信息</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1" class="form-label">名称</label>
                            <input type="text" class="form-control" id="name" v-model="selectuserdata.Name"
                                placeholder="请输入名称">
                        </div>
                        <!-- <div class="form-group">

                            <label for="exampleInputEmail1" class="form-label">电话</label>
                            <input type="text" class="form-control" id="name" v-model="selectuserdata.Phone"
                                placeholder="请输入名称">

                        </div> -->

                        <div class="form-group">
                            <label for="exampleInputEmail1" class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="name" v-model="selectuserdata.Email"
                                placeholder="请输入邮箱">
                        </div>

                        <div class="form-group">
                            <label for="exampleInputEmail1" class="form-label">密码</label>
                            <input type="text" class="form-control" id="name" v-model="selectuserdata.PassWord"
                                placeholder="请输入密码">
                        </div>


                        <div class="form-group">
                            <img style="border-radius:50%;" width="400px" :src="selectuserdata.img">
                        </div>


                    </div>
                    <div class="modal-footer">
                        <input type="file" @change="Files">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary " @click="updateuser">保存</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- Modal -->
        <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">查看你的头像</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <img style="border-radius:50%;" width="400px" :src="selectuserdata.img">
                    </div>
                    <div class="modal-footer">
                        <input type="file" @change="Files">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <!-- <button type="button" class="btn btn-primary">好的</button> -->
                    </div>
                </div>
            </div>
        </div>







        <div class="masonry">
            <article class="post">
                <div class="item" v-for="(item,index) in Articledata" :key="index">
                    <img class="img" :src="item.Image" />
                    <div class="masonry_box">
                        <div>
                            <img style="border-radius:50%; width: 50px; float: left;" :src="item.img">
                            <h5 style="float: left; padding-top: 15px; padding-left: 20px;">{{item.author}}</h5>



                            <!-- 图标 -->
                            <div style="float: right; padding-top: 15px; padding-right: 20px;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
                                    class="bi bi-suit-heart" viewBox="0 0 16 16">
                                    <path
                                        d="m8 6.236-.894-1.789c-.222-.443-.607-1.08-1.152-1.595C5.418 2.345 4.776 2 4 2 2.324 2 1 3.326 1 4.92c0 1.211.554 2.066 1.868 3.37.337.334.721.695 1.146 1.093C5.122 10.423 6.5 11.717 8 13.447c1.5-1.73 2.878-3.024 3.986-4.064.425-.398.81-.76 1.146-1.093C14.446 6.986 15 6.131 15 4.92 15 3.326 13.676 2 12 2c-.777 0-1.418.345-1.954.852-.545.515-.93 1.152-1.152 1.595L8 6.236zm.392 8.292a.513.513 0 0 1-.784 0c-1.601-1.902-3.05-3.262-4.243-4.381C1.3 8.208 0 6.989 0 4.92 0 2.755 1.79 1 4 1c1.6 0 2.719 1.05 3.404 2.008.26.365.458.716.596.992a7.55 7.55 0 0 1 .596-.992C9.281 2.049 10.4 1 12 1c2.21 0 4 1.755 4 3.92 0 2.069-1.3 3.288-3.365 5.227-1.193 1.12-2.642 2.48-4.243 4.38z" />
                                </svg>

                                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
                                    class="bi bi-star" viewBox="0 0 16 16">
                                    <path
                                        d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z" />
                                </svg>

                                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
                                    class="bi bi-shield-fill-exclamation" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                        d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.777 11.777 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7.159 7.159 0 0 0 1.048-.625 11.775 11.775 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.541 1.541 0 0 0-1.044-1.263 62.467 62.467 0 0 0-2.887-.87C9.843.266 8.69 0 8 0zm-.55 8.502L7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0zM8.002 12a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
                                </svg>
                            </div>


                        </div>
                        <h3 style=" clear: both;">{{item.articlename}}</h3>
                        <p>{{item.text}}
                    </div>

                    </p>
                </div>
            </article>
        </div>

        <!-- 
        <div class="masonry">
            <div class="item">
                <img src="http://source.unsplash.com/random/470x600" />
                <h2>Title Goes Here</h2>
                <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
                    deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
                    dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
                    quidem?
                </p>
            </div> -->
    </div>
</body>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            Articledata: [],
            selectuserdata: {
                Id: '',
                Name: '',
                Phone: '',
                Email: '',
                passWord: '',
                img: ''

            },
            username: "未获取名字",


            HtmlText: '',
            returnText: ''

        },
        created() {
            this.getArticledata();
            this.selectuserbyname();
        },
        methods: {
            walkout() {

                localStorage.removeItem('token');
                localStorage.removeItem('phone');
                location.href = '../html/Login.html';
                location.href = window.location.href;

            },

            returnaticle() {

                if (this.returnText == "") {
                    var url = window.location.href; //获取当前url
                    let name = url.split("=")[1];
                    this.returnText = name;
                }
                const token = window.localStorage.getItem('token')
                let that = this;
                axios.get(
                        `http://localhost:8999/MessageBoard_war/selectByname?name=${this.returnText}`, {
                            headers: {
                                token: `${token}`
                            }
                        }
                    )
                    .then(function (response) {
                        if (response.data.code == 200) {
                            that.Articledata = response.data.data;
                        } else {
                            alert(response.data.data, "用户验证失败");
                        }
                    })
            },
            getArticledata() {
                if (this.returnText == "") {
                    var url = window.location.href; //获取当前url
                    let name = url.split("=")[1];
                    this.HtmlText = name;
                }
                const token = window.localStorage.getItem('token')
                let that = this;
                axios.get(
                        `http://localhost:8999/MessageBoard_war/selectByname?name=${this.HtmlText}`, {
                            headers: {
                                token: `${token}`
                            }
                        }
                    )
                    .then(function (response) {
                        if (response.data.code == 200) {
                            that.Articledata = response.data.data;
                        } else {
                            alert(response.data.data, "用户验证失败");
                        }
                    })
            },
            selectuserbyname() {
                let that = this;
                const token = window.localStorage.getItem('token');
                const phone = window.localStorage.getItem('phone');
                axios({
                        method: 'get',
                        url: `http://localhost:8999/MessageBoard_war/Selectbyphone?phone=${phone}`,
                        headers: {
                            'token': token
                        }
                    }).then(function (response) {
                        that.selectuserdata = response.data.data;
                        that.username = response.data.data.Name;

                    })
                    .catch(function (error) {
                        alert(error.data.data)
                    });
            },

            updateuserimg() {
                const token = window.localStorage.getItem('token');
                const phone = window.localStorage.getItem('phone');
                axios({
                        method: 'post',
                        url: `http://localhost:8999/MessageBoard_war/updateuserimg?phone=${phone}&img=${this.selectuserdata.img}`,
                        headers: {
                            'token': token
                        }
                    }).then(function (response) {
                        alert(response.data.data)
                    })
                    .catch(function (error) {
                        alert(error.data.data)
                    });

            },
            Files() {
                this.imgdata = event.target.files[0];
                let param = new FormData();
                param.append('image', this.imgdata);
                axios.post('https://www.imgtp.com/api/upload', param, {
                        headers: {
                            'token': 'fa6fca8ee47b678a3b055ac1daa72d47'
                        }
                    })
                    .then((response) => {
                        if (response.data.code == 200) {
                            this.selectuserdata.img = response.data.data.url;
                            this.updateuserimg();
                        } else {
                            alert("请上传照片")
                        }
                    })
                    .catch(function (error) {
                        alert(error)
                    });
            },

            updateuser() {
                const token = window.localStorage.getItem('token');
                axios({
                        method: 'post',
                        url: `http://localhost:8999/MessageBoard_war/updateUser?name=${this.selectuserdata.Name}&email=${this.selectuserdata.Email}&password=${this.selectuserdata.PassWord}&id=${this.selectuserdata.id}&phone=${this.selectuserdata.Phone}`,
                        headers: {
                            'token': token
                        }
                    }).then(function (response) {
                        if (response.data.code == 200) {
                            alert("修改成功");
                        } else {
                            alert(response.data.data)
                        }
                    })
                    .catch(function (error) {
                        alert(error.data.data)
                    });
            },
        }
    })
</script>

</html>